﻿@charset "UTF-8";
/*默认按钮*/
.btn-wrap{padding:60rpx 30rpx 30rpx;}
.btn{
    @include text-overflow;position: relative;display: block;margin-left: auto;margin-right: auto;padding-left: 20rpx;padding-right: 20rpx;font-size:32rpx;text-align: center;text-decoration: none;color: #fff;border-radius: 60rpx;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);line-height: 90rpx;-webkit-box-sizing:border-box;box-sizing:border-box;
    &:after{@include line-both($color:rgba(0, 0, 0, .1),$radius:20rpx)}
    & + .btn{margin-top: 30rpx;}
}
.btn-main{background: #bfb197;}/*主按钮*/
.btn-sub{background: #fbfafc;color: #000;}/*次按钮*/
.btn-kong{background: none;color: #ffb514;overflow: visible;}
.btn-kong:after{border: 1rpx solid #ffb514;border-radius: 8rpx;}
.btn-core{background: #ffb514;color: #fff;border-radius: 8rpx;}
.btn-core:after{content: none;}
.btn-link{background: none;color: #576b95;font-size: 28rpx;}
.btn-link:after{content: none;}
/*圆角小按钮*/
.btn-round-main,.btn-round-sub{padding:0 20rpx;border-radius: 26rpx;font-size: 28rpx;}
.btn-round-main{line-height: 5rpx;background: #ffb514;} 
.btn-round-sub{line-height: 46rpx;background-color: #fff;border: 1rpx solid #ffb514;color: #ffb514;} 
.btn-round-main:after,.btn-round-sub:after{display: none}

/*点击态*/
.btn-main.tap-on,.btn-mini.tap-on,.btn-medium.tap-on{background-color: #2a6cd4!important;color:rgba(255,255,255,.6);}
.btn-sub.tap-on,.btn-sub-mini.tap-on{background-color: #ccc!important;color:rgba(0,0,0,.6);}
.btn-chief-hollow.tap-on{background-color: #fff!important;opacity: .6;}

/*不可点*/
.btn-main.disabled,.btn-mini.disabled,.btn-medium.disabled{background:#eee!important;color: #c0bfbf!important;}
.btn-chief-hollow.disabled{color: #000;border-color: #000;opacity: .2}
.btn-main.clocking{background: #e0e0e0;color: #808080;}

/*已完成状态*/
.btn-chief-hollow.done{color: #b2b2b2;border: solid 1px #b2b2b2;}

/*横排不满行两按钮*/
.btn-wrap.mutil{
    display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;
    .btn{-webkit-box-flex:1;width: 100%;}
    .btn + .btn{margin-top: 0;margin-left: .9rem;}
}

/*无背景颜色*/
.btn-mini.hollow{background: none;color: #ffb514;}
.btn.hollow:after{content: "";border-color: #ffb514;}

/*置底悬浮*/
.fixed-btn-pad{padding-bottom: 9rem!important;}/*body追加fixed-btn-pad*/

.fixed-btn-wrap{padding-bottom: 40rpx;
    position: fixed;width: 100%;bottom: 0;left: 0;z-index: 35; -webkit-box-sizing:border-box;box-sizing:border-box;
    .btn-wrap{padding:20rpx 54rpx;position: relative;
        & > div{padding: 0 30rpx;}
    }
    .tips{text-align: center;font-size: 28rpx;color: #333;}
    .btn{border-radius:80rpx;}
    .btn:after{content: none;}
    .btn + .btn{margin-top: 0;}
    .btn-sub{color:#353535;border: 1px solid #cecece;}
    .btn-sub.disabled{background-color: #ccc!important;color:rgba(0,0,0,.6);}
    .fixed-btn-tips{font-size: 24rpx;background: #e5f0ff;text-align: center;padding: .4rem 1rem;color: #f95f54;line-height: 1.5rem;position: relative;}
    .fixed-btn-tips:after{@include line-top($color:#d1dff5); z-index:3}
    .fixed-btn-tips .delete{color: #333;}


    .mutil,.mutil-main,.triple{@include flex-box;}

    /*平均多按钮*/
    .mutil > div{
        position: relative;-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;width: 100%;
        // &:not(:last-child) .btn:before{@include line-top;}
        &:not(:first-child):not(:last-child):after{@include line-left;}

    }

    /*两按钮强调 btn-main*/
    .mutil-main > div:first-child{width: 40%;}
    .mutil-main > div:last-child{-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;}

    /*三按钮*/
    .triple > div{
        position: relative;
        &:not(:last-child){-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;width: 100%}
        &:last-child{width: 50%;}
        // &:not(:last-child):before{@include line-top;z-index: 2}
        &:not(:last-child):after{@include line-left;}
    }

    // 气泡
    .bub-tips{
        position: absolute;bottom:6rem;left:5.5rem;
        &.angel-center{left:50%;-webkit-transform:translateX(-50%)}
    }

    .btn-main{z-index:4;}
} 

/*复选框在上  按钮在下*/
.checkbox-wrap + .btn-wrap{padding-top: 1.5rem;}

/*提示文字在按钮上面*/
.over-btn-tips{text-align: center;font-size: 1.2rem;color: #888;padding-top: 3rem;}
.over-btn-tips + .btn-wrap{padding-top: 1.5rem;}

/*提示文字在按钮下面*/
.btn-wrap .tips-txt{text-align: center;color: #888;font-size: 1.4rem;padding: 1.5rem 1rem 0;line-height: 1.4;}

/*置底悬浮*/
.fixed-btn-wrap .tips-txt{padding-bottom:.8rem;text-align: center;font-size: 1.2rem;color:#b2b2b2;line-height: 1;}

.btn-wrap{
    .icon-hao{display: inline-block;font-size: 30rpx;margin-right: 15rpx;}
}